<template>
  <div class="page-main"  v-title data-title="素材制作订单列表">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>素材制作订单列表</span></div>
    <div class="container">
      <div class="container-bg">
        <div class="header">
          <a-row type="flex" justify="space-between" align="middle">
            <a-col :xl="{ span: 11 }" :lg="{ span: 11 }">
              <a-button class="hte-btn add-btn" type="primary" icon="plus" @click="handAction('add')">新建</a-button>
              <a-button class="hte-btn port-btn"  @click="handlePostExportXls('素材制作订单')">导出</a-button>
              <a-button class="hte-btn" type="danger"  @click="handAction('del')">删除</a-button>
              <!--<a-button class="hte-btn" type="danger"  @click="handAction('void')">作废</a-button>-->
              <a-button class="hte-btn" @click="refresh">刷新</a-button>
            </a-col>
            <a-col :xl="{ span: 3 }" :lg="{ span: 5 }">
              <span style="color: red">
                {{'进行中订单数量：'+designingCount}}
              </span>
            </a-col>
            <a-col :xl="{ span: 9 }" :lg="{ span: 13 }" class="input-ground">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField">
                  <a-select-option value="1"> 订单号 </a-select-option>
                  <a-select-option value="2"> 订单名称 </a-select-option>
                </a-select>
                <a-input-search v-model="queryParam.keyword" @search="doSearch" allowClear placeholder="请输入关键词检索" />
              </a-input-group>
              <a-button class="hte-btn del-btn" @click="visibleModel=true">高级查询</a-button>
            </a-col>
          </a-row>
        </div>
        <div class="content">
          <a-table
            class="hte-table-content"
            :scroll="{ x: true }"          
            :columns="columns"
            :data-source="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            rowKey="id"
            size="middle"
            :customRow="rowHover"
            @change="handleTableChange"
          >
            <template slot="ellipsis" slot-scope="text, record">
              <!-- <a-popover :overlayStyle="{maxWidth:'600px'}">
                <template slot="content">
                  <div><span style="color:#000">当前步骤:</span> {{record.processCurrentTask}}</div>
                  <div><span style="color:#000">订单名称:</span> {{record.orderName}}</div>
                  <div><span style="color:#000">素材类型:</span> {{record.orderTypeDes}}</div>                  
                  <div><span style="color:#000">成本中心:</span> {{record.costCenterNo}}</div>                  
                </template>
                <span>{{text | ellipsis(15)}}</span>
              </a-popover>               -->
              <span :title="text">{{text | ellipsis(15)}}</span>
            </template>
            <template slot="processCurrentHandler" slot-scope="text, record">
              <span>{{ !!record.processCurrentTask?(record.processCurrentHandler+'/'+record.taskReceiveTime+'/'+record.stayDays):'' }}</span>
            </template>
            <template slot="designerName" slot-scope="text, record">
              <span>{{ record.designArrange=='1'?record.designerName:record.designSupplier }}</span>
            </template>
            <template slot="orderNo" slot-scope="text, record">
              <span style="color: blue;cursor: pointer;" @click="gotoDetail(record.id)">{{ text }}</span>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <a-back-top class="backtodom" />
    <a-modal
      v-model="visibleModel"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级搜索"
      @ok="callBackResult"
    >      
      <advanced-search :dataForm.sync="queryParam" ref="advanced"></advanced-search>
      <template slot="footer">
        <div class="footer-line">
          <a-button  @click="closeResulte">关 闭</a-button>
          <a-button  @click="resetResulte">重 置</a-button>
          <a-button type="primary" @click="callBackResult">确 定</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { getAction,postAction} from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
  import { USER_INFO } from '@/store/mutation-types'
  import {filterHasPermission} from '@/utils/hasPermission'
export default {
  name: 'MediaOrderList',
  mixins: [JeecgListMixin],
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    AdvancedSearch: () => import('./advancedSearch'),    
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'MediaOrderList',
      },
      currUser:Vue.ls.get(USER_INFO).username,
      columns:[],
      adminColumns: [
        {title: '状态',dataIndex: 'statusDes',width:80,align: 'center', ellipsis: true},
        {title: '当前步骤',dataIndex: 'processCurrentTask',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '当前处理人/接收时间/停留时间',dataIndex: 'processCurrentHandler',width:200,align: 'center', ellipsis: true,scopedSlots: { customRender: 'processCurrentHandler' },},
        {title: '订单号',dataIndex: 'orderNo',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'orderNo' },},
        {title: '订单名称',dataIndex: 'orderName',width:150,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '订单类型',dataIndex: 'orderTypeDes',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '展示形式',dataIndex: 'displayModeDes',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '应用类型',dataIndex: 'useTypeDes',width:120,align: 'center', ellipsis: true,},
        {title: '产品信息',dataIndex: 'productInfo',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '申请人',dataIndex: 'applyUserName',width:120,align: 'center', ellipsis: true,},
        {title: '申请时间',dataIndex: 'applyTime',width:120,align: 'center', ellipsis: true,},
        {title: '费用支出号',dataIndex: 'costCenterNo',width:120,align: 'center', ellipsis: true,},
        {title: '经济事项',dataIndex: 'economyItem',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '期望完成时间',dataIndex: 'expectFinishTime',width:120,align: 'center', ellipsis: true,},
        {title: '计划完成时间',dataIndex: 'planFinishTime',width:120,align: 'center', ellipsis: true,},
        {title: '实际完成时间',dataIndex: 'realFinishTime',width:120,align: 'center', ellipsis: true,},
        {title: '制作人/制作单位',dataIndex: 'designerName',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'designerName' }},
        {title: '制作服务费(元)',dataIndex: 'designerCost',width:120,align: 'center', ellipsis: true,},
        {title: '设计安排',dataIndex: 'designArrangeDes',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '制作方式',dataIndex: 'makeWayDes',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '标准工时(小时)',dataIndex: 'workingHours',width:120,align: 'center', ellipsis: true,},
        {title: '修改次数',dataIndex: 'modifyTimes',width:120,align: 'center', ellipsis: true,},
        {title: '作废说明',dataIndex: 'cancelMemo',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
      ],
      normalColumns:[
        {title: '状态',dataIndex: 'statusDes',width:70,align: 'center', ellipsis: true},
        {title: '当前步骤',dataIndex: 'processCurrentTask',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '当前处理人/接收时间/停留时间',dataIndex: 'processCurrentHandler',width:200,align: 'center', ellipsis: true,scopedSlots: { customRender: 'processCurrentHandler' },},
        {title: '订单号',dataIndex: 'orderNo',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'orderNo' },},
        {title: '订单名称',dataIndex: 'orderName',width: 140,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' },},
        {title: '素材类型',dataIndex: 'orderTypeDes',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '申请人',dataIndex: 'applyUserName',width:120,align: 'center', ellipsis: true,},
        {title: '申请时间',dataIndex: 'applyTime',width:120,align: 'center', ellipsis: true,},
        {title: '成本中心',dataIndex: 'costCenterNo',width:120,align: 'center', ellipsis: true,scopedSlots: { customRender: 'ellipsis' }},
        {title: '期望完成时间',dataIndex: 'expectFinishTime',width:120,align: 'center', ellipsis: true,},
        {title: '计划完成时间',dataIndex: 'planFinishTime',width:120,align: 'center', ellipsis: true,},
        {title: '实际完成时间',dataIndex: 'realFinishTime',width:120,align: 'center', ellipsis: true,},
        {title: '制作服务费(元)',dataIndex: 'designerCost',width:120,align: 'center', ellipsis: true,},
      ],
      url: {
        list: "/hteLibMediaOrder/list",
        getDesigningCount: "/hteLibMediaOrder/getDesigningCount",
        addOrder:'/library/media/addOrder',
        delBatch:'/hteLibMediaOrder/delBatch',
        cancelBatch:'/hteLibMediaOrder/cancelBatch',
        exportXlsUrl:'/hteLibMediaOrder/export'
      },
      // 高级查询
      visibleModel: false,
      form: {},
      //作废说明输入
      cancelMemo: '',
      designingCount:0,
      isMediaAdmin:false,
    }
  },
  mounted() {
    this.isMediaAdmin=filterHasPermission('libMedia:fullPower:all')||filterHasPermission('libMedia:fullPower:sj')||filterHasPermission('libMedia:fullPower:sp')||filterHasPermission('libMedia:fullPower:ds');
    if(this.isMediaAdmin){
      this.columns=this.adminColumns;
    }else{
      this.columns=this.normalColumns;
    }
    this.queryParam={
      searchField:'1',
      keyword:'',
      status:'',
      orderNo:'',
      orderName:'',
      applyUserName:'',
      orderType:'',
      designerName:''
    };
    this.getDesigningCount();
  },
  methods: {
    getDesigningCount(){
      getAction(this.url.getDesigningCount).then((res) => {
        if (res.code == 200) {
          this.designingCount=res.result||0;
        } else {
          this.$message.warning('获取制作中数量失败:' + res.message)
        }
      })
    },
    refresh(){
      this.loadData();
      this.getDesigningCount();
    },
    doSearch() {
      this.loadData(1)
    },
    /**
     * 高级搜索 
     */
    callBackResult(){
      this.visibleModel = false;
      if(Object.keys(this.queryParam).length == 0){
        return
      }
      this.doSearch();
    },
    closeResulte(){
      this.visibleModel = false;
      this.resetResulte();
    },
    resetResulte(){
      this.$refs.advanced.resetForm()
    },
    /**
     * 操作 
     */
    handAction(type){
      const that = this;
      if(type == 'add'){
        // 新增
        let routeUrl = this.$router.resolve({
          path: '/library/media/addOrder'
        });
        window.open(routeUrl.href, '_blank');
      }
      if(type == 'void'){
        // 作废，可多选
        if(this.selectedRowKeys.length == 0){
          this.$message.warning('请选择至少一条数据！');
          return;
        }
        const flag = this.selectionRows.some(item=>{
          return ![2,3,4].includes(item.status)
        })
        if(flag){
          this.$message.warning('已选订单状态不允许作废，只可作废状态为审批中、制作中、确认中的订单');
          return;
        }
        const flag1 = this.selectionRows.some(item=>{
          return item.applyUserId!=that.currUser
        })
        if(flag1){
          this.$message.warning('非订单申请人，不能作废订单');
          return;
        }
        this.$confirm({
          width: 480,
          title: '请确认是否作废此订单？并请先填写作废说明。',
          content: (
            <div>              
              <div style="marginTop:15px;">
                <a-textarea
                  rows={3}
                  v-model={this.cancelMemo}
                  maxLength={200}
                  placeholder='请填写作废说明'
                />
              </div>
            </div>
          ),
          onOk() {
            if(!that.cancelMemo.trim()){
              that.$message.warning('请填写作废说明');
              return Promise.reject('请填写作废说明')
            }else{
              console.log(that.cancelMemo)
              postAction(that.url.cancelBatch, {ids:that.selectedRowKeys,cancelMemo:that.cancelMemo.trim()}).then((res) => {
                if (res.code == 200) {
                  that.$message.success('作废成功')
                  that.loadData();
                } else {
                  that.$message.warning('作废失败:' + res.message)
                }
              })
            }          
          },
        });
      }
      if(type == 'del'){
        const that = this;
        // 删除，可多选
        if(this.selectedRowKeys.length == 0){
          this.$message.warning('请选择至少一条数据！');
          return;
        }
        const flag = this.selectionRows.some(item=>{
          return item.status != 1
        })
        if(flag){
          this.$message.warning('已选订单状态不允许删除，只可删除状态为创建中的订单');
          return;
        }
        for(let i=0;i<this.selectionRows.length;i++){
          let row=this.selectionRows[i];
          if(row.processInstanceId&&row.applyUserId != that.currUser){
            this.$message.warning('订单【'+row.orderNo+'】已发起流程，需申请人自己才能删除');
            return;
          }
        }
        this.$confirm({
          title: '确认删除',
          content: '请确认是否删除此订单?',
          onOk: function() {
            postAction(that.url.delBatch, that.selectedRowKeys).then((res) => {
              if (res.code == 200) {
                that.$message.success('删除成功')
                that.loadData();
              } else {
                that.$message.warning('删除失败:' + res.message)
              }
            })
          }
        });
      }
    },
    gotoDetail(id){
      let routeUrl = this.$router.resolve({
        path: '/library/media/addOrder?id='+id
      });
      window.open(routeUrl.href, '_blank');
    },
    rowHover(record) {
      return {
        on: {
          mouseenter: (e) => {            
            const target = e.target; 
            let html = ''           
            if(this.isMediaAdmin){
              html = "订单名称： "+record.orderName+"\n订单类型： "+ record.orderTypeDes+"\n产品信息： "+ record.productInfo+"\n经济事项： "+record.economyItem
            }else{              
              html = "订单名称： "+record.orderName+"\n素材类型： "+ record.orderTypeDes+"\n成本中心： "+ record.costCenterNo
            }            
            target.title = html;
          }, 
        },
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {    
    background-image: url(../../../assets/contract-top.png);
  }
  .container {padding: 0 125px 80px;
    .container-bg{
      background-color: #fff;padding: 25px;
      .content{margin-top: 22px;}
      /deep/ .ant-pagination{
        background-color: #f5f5f5;
        padding: 10px 15px;
      }
    }
    .succfont {
      color: @font-color-succ;
    }    
  }
  .hte-btn{min-width: auto;padding: 0 11px;margin-bottom: 5px;}
}
</style>